<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center JNPF-flex-main">
      <div class="student-eval/check">
        <el-row :gutter="10">
          <el-col :span="6">
            <CheckClazz ref="check-clazz" @ver-click="verClick"/>
          </el-col>
          <el-col :span="9">
            <EvalContent ref="eval-content" @item-detail="itemClick"/>
          </el-col>
          <el-col :span="9">
            <SubmitList ref="submit-list" @stu-eval="stuEval"/>
          </el-col>
        </el-row>
        <studentEvalItem ref="student-eval-item" v-if="drawerVisible"/>
      </div>
    </div>
  </div>
</template>

<script>
import CheckClazz from './check-clazz'
import EvalContent from './eval-content'
import SubmitList from './submit-list'
import studentEvalItem from './student-eval-item'

export default {
  name: "index",
  data() {
    return {
      drawerVisible: false,
    }
  },
  components: {
    CheckClazz,
    EvalContent,
    SubmitList,
    studentEvalItem
  },
  methods: {
    verClick(row) {
      this.$nextTick(() => {
        this.$refs['eval-content'].init(row.verId, row['clazzId']);
      })
    },
    itemClick(row, clazzId) {
      this.$nextTick(() => {
        this.$refs["submit-list"].init(row, clazzId)
      })
    },
    stuEval(row) {
      this.drawerVisible = true
      this.$nextTick(() => {
        this.$refs["student-eval-item"].init(row['stuId'], row['itemId']);
      })

    }
  },
}
</script>

<style scoped>

</style>
